* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

html,
body {
    width: 100vw;
    height: 100%;
}

body {
    height: 100%;
    background-color: #e7e7e7;
}

html {
    font-size: 13.333vw;
}

img {
    width: 100%;
    height: 100%;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clearfix {
    content: '';
    display: block;
    clear: both;
}

.mid {
    width: 6.88rem;
    margin: 0 auto;
}

header {
    width: 7.5rem;
    height: 1rem;
    padding: 0 0.31rem;
    background-color: #fff;
}

header>p {
    width: 1.48rem;
    margin: 0 auto;
    line-height: 1rem;
    height: 0.36rem;
    color: #222222;
    font-size: 0.37rem;
    font-weight: 700;
}

.container {
    width: 7.5rem;
}

.container .orderForm {
    width: 7.2rem;
    height: 3.87rem;
    background-color: #fff;
    margin-top: 0.29rem;
    margin-left: 0.3rem;
}

.container .orderForm .formTop,
.container .orderForm .formBottom {
    height: 1.82rem;
    position: relative;
}

.container .orderForm .formTop .circle,
.container .orderForm .formBottom .circle {
    width: 0.4rem;
    height: 0.4rem;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 2px solid #E7E7E7;
    opacity: 1;
    margin-right: 0.21rem;
}

.container .orderForm .formTop section.iconNatie,
.container .orderForm .formBottom section.iconNatie {
    padding-top: 0.15rem;
    padding-right: 0.24rem;
    width: 1rem;
    height: 1.35rem;
}

.container .orderForm .formTop section.formLeft,
.container .orderForm .formBottom section.formLeft {
    left: 90%;
    height: 1.35rem;
    padding-top: 0.15rem;
}

.container .orderForm .formTop section.formLeft .titC,
.container .orderForm .formBottom section.formLeft .titC {
    font-size: 0.27rem;
    font-family: 'PingFang';
    font-weight: 700;
}

.container .orderForm .formTop section.formLeft .nameC,
.container .orderForm .formBottom section.formLeft .nameC {
    font-family: 'PingFang';
    color: #999;
    font-size: 0.23rem;
    font-weight: 400;
}

.container .orderForm .formTop section.formLeft .priceC,
.container .orderForm .formBottom section.formLeft .priceC {
    font-size: 0.31rem;
    font-family: 'PingFang';
    color: #B67546;
    font-weight: 900;
}

.container .orderForm .formTop section.formLeft .priceC span.shanchu,
.container .orderForm .formBottom section.formLeft .priceC span.shanchu {
    font-size: 0.25rem;
    font-weight: 500;
    text-decoration: line-through;
    color: #999;
}

.container .orderForm .formTop .formRight,
.container .orderForm .formBottom .formRight {
    border-radius: 1px solid red;
    position: absolute;
    width: 1.7rem;
    display: flex;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: row;
    justify-content: space-between;
    margin: 0 0.32rem;
    right: 0.32rem;
}

.container .orderForm .formTop .formRight .sub,
.container .orderForm .formBottom .formRight .sub {
    width: 0.46rem;
    height: 0.46rem;
    border: 1px solid #d3d3d3;
    border-radius: 50%;
    position: relative;
    border: 1x solid #E3E3E3;
}

.container .orderForm .formTop .formRight .sub>span,
.container .orderForm .formBottom .formRight .sub>span {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 0.23rem;
    display: inline-block;
    height: 0.04rem;
    border-radius: 0.02rem;
    opacity: 1;
    background-color: #CBCBCB;
}

.container .orderForm .formTop .formRight .numb,
.container .orderForm .formBottom .formRight .numb {
    width: 0.09rem;
    height: 0.2rem;
    font-size: 0.25rem;
    font-weight: 700;
    display: block;
    margin-top: -15%;
    font-family: PingFang, PingFang-SC-Bold;
    font-weight: SC-Bold;
    color: #333;
    line-height: 0.94rem;
}

.container .orderForm .formTop .formRight .add,
.container .orderForm .formBottom .formRight .add {
    width: 0.46rem;
    height: 0.46rem;
    border: 1px solid #d3d3d3;
    border-radius: 50%;
    position: relative;
    border: 1x solid #E3E3E3;
}

.container .orderForm .formTop .formRight .add>span.heng,
.container .orderForm .formBottom .formRight .add>span.heng {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 0.23rem;
    height: 0.04rem;
    opacity: 1;
    background: #1d1d1d;
    border-radius: 2px;
}

.container .orderForm .formTop .formRight .add>span.shu,
.container .orderForm .formBottom .formRight .add>span.shu {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 0.04rem;
    height: 0.23rem;
    opacity: 1;
    background: #1d1d1d;
    border-radius: 2px;
}

.container .recommend {
    height: 5.64rem;
}

.container .recommend>.recomTop {
    height: 1.02rem;
    position: relative;
}

.container .recommend>.recomTop>.shape {
    width: 0.1rem;
    height: 0.35rem;
    display: inline-block;
    opacity: 1;
    background: #bc9a81;
    margin-left: 0.31rem;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.container .recommend>.recomTop .coff {
    width: 1.25rem;
    height: 0.31rem;
    opacity: 1;
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.31rem;
    font-family: PingFang, PingFang-SC-Bold;
    font-weight: SC-Bold;
    text-align: left;
    color: #222222;
    line-height: 0.42rem;
}

.container .recommend>.recomTop .chang {
    width: 0.99rem;
    height: 0.25rem;
    opacity: 0.3;
    font-size: 0.25rem;
    font-family: PingFang, PingFang-SC-Medium;
    font-weight: SC-Medium;
    text-align: right;
    color: #222222;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    line-height: 0.42rem;
}

.container .recommend .recomBot {
    margin: 0 0.31rem;
    display: flex;
    justify-content: space-around;
}

.container .recommend .recomBot .leftRec,
.container .recommend .recomBot .centerRec,
.container .recommend .recomBot .rightRec {
    width: 2.08rem;
    height: 3.75rem;
    border-radius: 0.1rem;
    background-color: #fff;
}

.container .recommend .recomBot .leftRec>.leftTop,
.container .recommend .recomBot .centerRec>.leftTop,
.container .recommend .recomBot .rightRec>.leftTop {
    width: 2.08rem;
    height: 2.08rem;
    margin-bottom: 0.31rem;
}

.container .recommend .recomBot .leftRec>.leftBot,
.container .recommend .recomBot .centerRec>.leftBot,
.container .recommend .recomBot .rightRec>.leftBot {
    position: relative;
}

.container .recommend .recomBot .leftRec>.leftBot>.titl,
.container .recommend .recomBot .centerRec>.leftBot>.titl,
.container .recommend .recomBot .rightRec>.leftBot>.titl {
    height: 0.23rem;
    padding-left: 0.12rem;
    opacity: 1;
    font-size: 0.23rem;
    font-family: PingFang, PingFang-SC-Bold;
    font-weight: SC-Bold;
    color: #222222;
}

.container .recommend .recomBot .leftRec>.leftBot>.tag,
.container .recommend .recomBot .centerRec>.leftBot>.tag,
.container .recommend .recomBot .rightRec>.leftBot>.tag {
    width: 1.62rem;
    height: 0.2rem;
    padding-left: 0.12rem;
    opacity: 1;
    font-size: 0.19rem;
    font-family: PingFang, PingFang-SC-Regular;
    font-weight: SC-Regular;
    color: #999999;
    line-height: 0.4rem;
    margin-bottom: 0.28rem;
}

.container .recommend .recomBot .leftRec>.leftBot>.pri,
.container .recommend .recomBot .centerRec>.leftBot>.pri,
.container .recommend .recomBot .rightRec>.leftBot>.pri {
    height: 0.21rem;
    padding-left: 0.12rem;
    opacity: 1;
    font-size: 0.25rem;
    font-family: PingFang, PingFang-SC-Heavy;
    font-weight: SC-Heavy;
    text-align: left;
    color: #b67546;
    letter-spacing: -0.02rem;
}

.container .recommend .recomBot .leftRec>.leftBot>.gwc,
.container .recommend .recomBot .centerRec>.leftBot>.gwc,
.container .recommend .recomBot .rightRec>.leftBot>.gwc {
    width: 0.37rem;
    height: 0.37rem;
    border-radius: 50%;
    position: absolute;
    top: 0.7rem;
    right: 0.13rem;
    background-color: #bc9a81;
}

.container .recommend .recomBot .leftRec>.leftBot>.gwc>img,
.container .recommend .recomBot .centerRec>.leftBot>.gwc>img,
.container .recommend .recomBot .rightRec>.leftBot>.gwc>img {
    position: absolute;
    margin-top: 0.08rem;
    margin-left: 0.03rem;
    width: 80%;
    height: 80%;
}

.priceSum {
    width: 7.5rem;
    position: fixed;
    bottom: 0;
    margin-bottom: 1rem;
    height: 1rem;
    background-color: #fff;
    border-bottom: 1px solid #e1e1e1;
}

.priceSum>.yinfu {
    width: 4rem;
    opacity: 1;
    font-size: 0.25rem;
    font-family: PingFang, PingFang-SC-Medium;
    font-weight: SC-Medium;
    text-align: right;
    color: #666666;
    line-height: 0.48rem;
    top: 50%;
    left: 20%;
    transform: translateY(-50%);
    text-align: center;
    position: absolute;
}

.priceSum>.yinfu>.sumPri {
    font-size: 0.37rem;
    font-family: PingFang, PingFangSC-Bold;
    color: #B67546;
}

.priceSum>p {
    width: 2.5rem;
    height: 1rem;
    position: absolute;
    right: 0;
    opacity: 1;
    font-size: 0.31rem;
    background-color: #bc9a81;
    font-family: PingFang, PingFang-SC-Medium;
    font-weight: SC-Medium;
    text-align: center;
    color: #ffffff;
    line-height: 1rem;
}

.priceSum>p>a {
    color: #fff;
}

#isChange {
    color: #BC8381;
}

footer.payMoney {
    bottom: 0;
    width: 100%;
    position: fixed;
    height: 1rem;
    background-color: #fff;
    display: flex;
    padding: 0.13rem 0.71rem;
    justify-content: space-between;
}

footer.payMoney a {
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 50%;
}

footer.payMoney>a>img {
    width: 0.41rem;
    height: 0.41rem;
}

footer.payMoney>a>span {
    padding: 0.12rem 0;
    height: 0.24rem;
    opacity: 1;
    font-size: 0.23rem;
    font-family: PingFang, PingFang-SC-Medium;
    font-weight: SC-Medium;
    text-align: center;
    color: #888;
}